<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="省份">
              <a-select
                style="width:100%"
                v-model="queryParam.province"
                placeholder="请选择"
              >
                <template v-for="(value,key) in provinceData">
                  <a-select-option :key="key" :value="key" @click.native="onChangeProvinceData(key,value)">
                    {{value}}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="城市">
              <a-select
                style="width:100%"
                v-model="queryParam.city"
                placeholder="请选择"
              >
                <template v-for="(value,key) in cityData">
                  <a-select-option :key="key" :value="key">
                    {{value}}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="default"
        rowKey="provinceId"
        bordered
        :columns="columnst1"
        :dataSource="dataSource1"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        class="position_table">

        <template slot="expanded" slot-scope="text, record, index">
              <span v-if="record.list.length > boolsLength" @click="toggleClick(index, bools[index])" style="cursor: pointer;">
                <a-icon v-if="bools[index]" type="plus-square" title="展开" />
                <a-icon v-else type="minus-square" title="收起" />
              </span>
              <span v-else>--</span>
        </template>
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { cloneDeep } from "lodash";
  export default {
    name: 'SysPositionList',
    mixins: [JeecgListMixin],
    components: {
    },
    data() {
       const renderContent1 = (text, row, index) => {
        const obj = {
          children: text,
          attrs: {
            colSpan: 0
          }
        };
        return obj;
      };
      const renderContent2 = (value, row, i) => {
        const childrenVal = (
          <a-table
            columns={columnst2}
            data-source={row.list}
            pagination={false}
            showHeader={false}
            bordered={true}
            rowKey="cityId"
            class={{ children_table: true, expanded_rows: this.bools[i] }}
          >
          </a-table>
        );
        const childrenNot = <div style="padding-left:14px;color: #999;"></div>;
        const obj = {
          children:
            row.list.length > 0 ? childrenVal : childrenNot,
          attrs: {
            colSpan: columnst2.length //需要合并的列数
          }
        };
        return obj;
      };
      const columnst = [
            {
              title: "",
              dataIndex: "expanded",
              width: 60,
              scopedSlots: { customRender: "expanded" },
              align: "center",
            },
            {
              title: '序号',
              dataIndex: '',
              key: 'rowIndex',
              width: 80,
              align: 'center',
              customRender: function (t, r, index) {
                return parseInt(index) + 1
              }
            },
            {
              title: '省份',
              align: 'center',
              width: 160,
              dataIndex: 'province',
            },
            {
              title: '城市',
              align: 'center',
              dataIndex: 'city',
              width: 160,
              childrenTable: true,
              childrenTableFirst: true
            },
            {
              title: '数据状态',
              align: 'center',
              dataIndex: 'status',
              width: 160,
              childrenTable: true,
              customRender: (t, r, index) =>{
                return <font style="font-size:20px">{t==0?'√':''}</font>;//t==0?'√':''
              }
            }
          ];
          // 克隆数组
      const columnstCopy = cloneDeep(columnst);
      const columnst1 = cloneDeep(columnst);
      columnst1.forEach(item => {
        if (item.childrenTable && !item.childrenTableFirst) {
          item.customRender = renderContent1;
        } else if (item.childrenTable && item.childrenTableFirst) {
          item.customRender = renderContent2;
        }
      });
      const columnst2 = columnstCopy
        .map((item, index) => {
          if (item.childrenTable) {
            return item;
          }
        })
        .filter(obj => obj !== undefined);
      return {
        pcaa: this.$Jpcaa,
        queryParam:{
          province:'0',
          city:'0'
        },
        provinceData:Object.assign({'0':'不限'}, this.$Jpcaa[86] ),//省份数据
        cityData:{'0':'不限'},//城市
        columns: [
        ],
        columnst1,
        columnst2,
        dataSource1:[
          {provinceId:'1',province:'海南省',list:
              [
                {cityId:'1',city:'海口市',status:0},
                {cityId:'2',city:'三亚市',status:0},
                {cityId:'3',city:'文昌市',status:0},
                {cityId:'4',city:'琼海市',status:0},
                {cityId:'5',city:'万宁市',status:0},
                {cityId:'6',city:'定安市',status:0}
              ]
          },
          {provinceId:'2',province:'广东省',list:
              [
                {cityId:'1',city:'广州市',status:0},
                {cityId:'2',city:'潮汕市',status:0},
              ]
          },
          {provinceId:'3',province:'福建省',list:
              [
                {cityId:'1',city:'厦门市',status:0},
              ]
          },
          {provinceId:'4',province:'山东省',list:
              [
                {cityId:'1',city:'青岛市',status:0},
              ]
          },
          {provinceId:'5',province:'黑龙江省',list:
              [
                {cityId:'1',city:'黑龙江市',status:0},
                {cityId:'2',city:'哈尔滨市',status:0},
              ]
          },
        ],
        url: {
          list: '/sys/position/list',
          delete: '/sys/position/delete',
          deleteBatch: '/sys/position/deleteBatch',
          exportXlsUrl: '/sys/position/exportXls',
          importExcelUrl: 'sys/position/importExcel',
        },
        bools: [],
        boolsLength: 3,
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    created() {
      this.dataSource1.forEach((item, index) => {
        this.bools.push(
          item.list.length > this.boolsLength ? true : false
        );
      });
    },
    methods: {
      onChangeProvinceData(key,value){
        this.queryParam.city = '0'
        this.cityData = {'0':'不限'}
        let cityDataTmp = this.pcaa[key] 
        this.cityData = Object.assign(this.cityData, cityDataTmp);
        // if(key=='460000'){
        //   let cityother= this.pcaa[key.slice(0,2)+'9000'] 
        //   this.cityData =Object.assign(this.cityData, cityother);
        //   delete this.cityData[key.slice(0,2)+'9000']
        // }
     },
     //显示与隐藏之间切换
      toggleClick(i, bool) {
        this.$set(this.bools, i, !bool)
      },
    }
  }
</script>
<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .ant-card-body .table-operator {
    margin-top: 18px;
  }

  // .ant-table-tbody .ant-table-row td {
  //   padding-top: 15px;
  //   padding-bottom: 15px;
  // }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }

  .position_table {
  /deep/.ant-table-body > {
    .ant-table-tbody > tr.ant-table-row > td[colspan] {
      padding: 0px !important;
      // border-right: 0;
      // border-bottom: 0;
      height: 100%
    }
  }
  .children_table {
    /deep/.ant-table-body > table {
      border-top: 0;
      border-left: 0;
      padding-left: 1px;
      height: 100%;
      tr {
        &:last-child {
          td {
            border-bottom: 0;
          }
        }
        td:last-child {
          border-right: 0;
        }
      }
    }
    &.expanded_rows {
      /deep/.ant-table-tbody {
        tr {
          display: none;
        }
        tr:nth-of-type(1),
        tr:nth-of-type(2),
        tr:nth-of-type(3) {
          display: table-row;
        }
        tr:nth-of-type(3) {
          td {
            border-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
